<template>
  <div class="fillcontain" v-loading="dataListLoading">
    <bt-col-header title="流程管理"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="120px">
        <div class="row">
          <div class="col-md-6">
            <el-form-item label="流程名称">
              <el-input v-model="dataForm.flowName" placeholder="流程名称" clearable></el-input>
            </el-form-item>
          </div>
          <div class="col-md-6">
            <el-form-item label="流程标识">
              <el-input v-model="dataForm.flowIdentify" placeholder="流程标识" clearable></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button :plain="true" type="info" shape="capsule" icon="search" @click="getDataList()">查询</rich-button>
            <rich-button shape="capsule" icon="quit" @click="resetData()">重置</rich-button>
          </div>
        </div>
      </el-form>

      <div class="">
        <!-- 操作按钮 -->
        <div class="btn-padding left">
          <el-button type="info" :disabled="btnBoolean" icon="circle-plus" plain @click="editFlow()">新增</el-button>
        </div>

        <!-- 查询结果列表 -->
        <div class="table_container">
          <!-- 列表 -->
          <el-table :data="dataList" border style="width: 100%">
            <el-table-column type="index" header-align="center" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="flowName" header-align="center" align="center" label="流程名称">
            </el-table-column>
            <el-table-column prop="flowIdentify" header-align="center" align="center" label="流程标识">
            </el-table-column>

            <el-table-column prop="remark" header-align="center" align="center" label="说明">
            </el-table-column>

            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" :disabled="scope.row.disabled" size="small" @click="editFlow(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="showDetail(scope.row)">查看</el-button>
                <el-button type="text" size="small" @click="showJava(scope.row)">流程源码</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination class="float-right mt-2" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.totalPage" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>  
    </div>
    

    <el-dialog title="代码编辑" width="80%" :close-on-click-modal="false" :visible.sync="javaCodeVisible">
      <el-row>
        <el-col :span="24">
          <div class="temp_content">
            <codemirror ref="mycode" :value="flowJava" v-model="flowJava" :options="cmOptions" class="code">
            </codemirror>
          </div>
          <div class="temp_footer">
            <el-button type="primary" size="small" @click="saveJava">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageList,
  updateFlow,
  getInfo,
  judgeFlow,
} from "@/api/ruleConfig/flow";
import constant from "../../../../../api/constant";
import { codemirror } from "vue-codemirror";
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

export default {
  data() {
    return {
      taskinfo2: {},
      btnBoolean: true,
      flowJava: "",
      dataForm: {
        flowName: "",
        flowIdentify: "",
      },
      cmOptions: {
        value: "",
        mode: "x-java",
        theme: "ambiance",
        readOnly: false,
        lineNumbers: true,
      },
      id: "",
      ruleFlow: {
        flowJava: "",
      },
      flowId: "",
      isShowNoChange: true, // 当无对比时展示源代码
      outputFormat: "side-by-side", // 展示的方式line-by-line，side-by-side
      loading: false,
      editFlowVisible: false,
      javaCodeVisible: false,
      dataList: [],
      dataListLoading: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      },
    };
  },
  components: {
    codemirror,
  },
  computed: {
    taskinfo() {
      return this.$store.state.checktaskInfo;
    }
  },
  watch: {
    taskinfo: {
      handler: function (newVal, oldVal) {
        // console.log(newVal, oldVal);
        this.taskinfo2 = newVal;
        this.getDataList();
        if (newVal.status == '1') {
          this.btnBoolean = false;
        } else {
          this.btnBoolean = true
          this.$message.warning('该任务已发布，不能新增或编辑!')
        }
      },
      deep: true,
    },
    taskinfo2: {
      handler: function (newVal, oldVal) {
        // console.log(newVal);

      },
      deep: true,
    },
  },
  created() {
    this.taskinfo2 = this.$store.state.checktaskInfo;
    if (this.taskinfo2 && this.taskinfo2.taskNo) {
      this.btnBoolean = false;
    }
    this.getDataList();
  },
  mounted() { },
  methods: {
    resetData() {
      this.dataForm = {
        flowName: "",
        flowIdentify: "",
      };
    },
    //查看源码
    showJava(row) {
      this.ruleFlow = {};
      this.flowJava = ``;
      this.id = row.flowId;
      let params = {
        flowIdentify: row.flowIdentify,
        rowTaskNo: row.taskNo,
      };
      this.ruleFlow = {
        flowJava: "",
      };
      getInfo(params).then((res) => {
        if (res.data.data && res.data.resultCode === 0) {
          this.ruleFlow = res.data.data.ruleFlow;
          this.flowJava = res.data.data.flowJava;
          this.javaCodeVisible = true;
        } else {
          this.$message.error(res.data.resultMsg);
        }
      });
    },

    // 保存源码
    saveJava() {
      if (!this.flowJava) {
        this.$message.error('流程源码不能为空！')
        // this.$confirm('没有流程源码，是否需要保存？', "温馨提示", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning",
        // }).then(() => {
        //     this.getupdateFlow()
        //   }).catch(() => {});
      } else {
        this.getupdateFlow()
      }

    },
    // 保存源码
    getupdateFlow() {
      let params = {
        flowJava: this.flowJava,
        ruleFlow: JSON.stringify(this.ruleFlow),
      };
      updateFlow(params).then((res) => {
        if (res.data.resultCode == '0') {
          this.$message.success(res.data.resultMsg)
        } else {
          this.$message.error(res.data.resultMsg)
        }
        this.getDataList();
        this.javaCodeVisible = false;
      });
    },
    refreshVisble() {
      this.editFlowVisible = false;
    },
    // 新增、编辑流程
    editFlow(row) {
      // console.log(row);
      // 流程新增/修改  判断跳转
      let param = {};
      if (row) {
        param = { task_no: row.taskNo };
      } else {
        param = { task_no: this.taskinfo2.taskNo };
      }
      judgeFlow(param).then((res) => {
        // console.log(res.data.data);
        if (res.data.data == "Y") {
          if (row) {
            row.disabled = false
            this.$router.push({
              path: `/drools-ruleConfig/flow/edit-flow/${row.FLOW_ID}/${row.taskNo}/${this.taskinfo.taskNo}/${row.flowIdentify}`
            });
          } else {
            this.btnBoolean = false
            this.$router.push({ path: `/drools-ruleConfig/flow/edit-flow/${this.taskinfo.taskNo}` });
          }
        } else {
          if (row) {
            // console.log(row);
            row.disabled = true
            this.dataList.splice(1, 0);
          } else {
            this.btnBoolean = true
          }
          this.$message.error(res.data.resultMsg);
        }
      });
    },
    // 查看流程
    showDetail(row) {
      // console.log(row);
      constant.clearTag(this);
      this.$router.push({
        path: `/drools-ruleConfig/flow/view-flow/${row.FLOW_ID}/${row.taskNo}/${row.flowIdentify}`
      });
    },
    // // 新增流程
    // addFlow(id) {
    //     constant.clearTag(this)
    //     // this.$router.push({path: "/drools-ruleConfig/flow/edit-flow"})
    // },

    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      let params = {
        pageNumber: this.page.pageIndex,
        pageSize: this.page.pageSize,
        flowName: this.dataForm.flowName,
        flowIdentify: this.dataForm.flowIdentify,
        taskNo: this.taskinfo2.taskNo,
        channelCode: this.$store.state.channel.channelCode,
      };
      pageList(params).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        this.dataList = res.data.data.list;
        this.page.totalPage = res.data.data.totalCount;
        if (this.taskinfo2.status == '1') {
          this.dataList.forEach(e => {
            e.disabled = false
          });
        }
        if (this.taskinfo2.status !== '1') {
          this.dataList.forEach(e => {
            e.disabled = true
          });
        }
      })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
  },
};
</script>
<style>
body .el-table th.gutter {
  display: table-cell !important;
}

/* #mountNode {
    width: 500px;
    height: 500px;
    border: 1px saddlebrown solid;
  } */
.CodeMirror {
  height: 400px;
}
.temp_footer {
  padding: 20px;
  text-align: center;
}
</style>
